<template>
  <div class="container-box">
<!--    <div class="form-box">-->
<!--      <el-row class="input-box" :gutter="20">-->
<!--        <el-col :span="6" class="input-label">-->
<!--          <el-col :span="8" class="label">电商企业：</el-col>-->
<!--          <el-col :span="16">-->
<!--            <el-select size="mini" v-model="value" placeholder="请选择电商企业">-->
<!--              <el-option-->
<!--                v-for="item in options"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </el-col>-->
<!--        </el-col>-->
<!--        <el-col :span="6" class="input-label">-->
<!--          <el-col :span="8" class="label">仓库名称：</el-col>-->
<!--          <el-col :span="16">-->
<!--            <el-select size="mini" v-model="value" placeholder="请选择仓库名称">-->
<!--              <el-option-->
<!--                v-for="item in options"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </el-col>-->
<!--        </el-col>-->
<!--        <el-col :span="6" class="input-label">-->
<!--          <el-col :span="8" class="label">订单状态：</el-col>-->
<!--          <el-col :span="16">-->
<!--            <el-select size="mini" v-model="value" placeholder="请选择订单状态">-->
<!--              <el-option-->
<!--                v-for="item in options"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </el-col>-->
<!--        </el-col>-->
<!--        <el-col :span="6" class="input-label">-->
<!--          <el-col :span="8" class="label">推送状态：</el-col>-->
<!--          <el-col :span="16">-->
<!--            <el-select size="mini" v-model="value" placeholder="请选择推送状态">-->
<!--              <el-option-->
<!--                v-for="item in options"-->
<!--                :key="item.value"-->
<!--                :label="item.label"-->
<!--                :value="item.value"-->
<!--              ></el-option>-->
<!--            </el-select>-->
<!--          </el-col>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row class="input-box" :gutter="20">-->
<!--        <el-col :span="6" class="input-label">-->
<!--          <el-col :span="8" class="label">运单号：</el-col>-->
<!--          <el-col :span="16">-->
<!--            <el-input placeholder="请输入运单号" size="mini" v-model="input2"></el-input>-->
<!--          </el-col>-->
<!--        </el-col>-->
<!--        <el-col :span="6" class="input-label">-->
<!--          <el-col :span="8" class="label">推送日期：</el-col>-->
<!--          <el-col :span="16">-->
<!--            <el-date-picker-->
<!--              v-model="DateValue"-->
<!--              size="mini"-->
<!--              type="datetimerange"-->
<!--              range-separator="至"-->
<!--              start-placeholder="开始日期"-->
<!--              end-placeholder="结束日期"-->
<!--              format="yyyy 年 MM 月 dd 日 HH:mm:ss"-->
<!--              value-format="yyyy-MM-dd HH:mm:ss"-->
<!--              align="right"-->
<!--            ></el-date-picker>-->
<!--          </el-col>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--      <el-row :gutter="20">-->
<!--        <el-col :span="6" class="input-label">-->
<!--          <el-col :span="8" class="label">订单编号：</el-col>-->
<!--          <el-col :span="16">-->
<!--            <el-input-->
<!--              type="textarea"-->
<!--              :rows="1"-->
<!--              placeholder="请输入运单号，多个订单号之间用逗号隔开"-->
<!--              size="mini"-->
<!--              v-model="input2"-->
<!--              style="width:500px"-->
<!--            ></el-input>-->
<!--          </el-col>-->
<!--        </el-col>-->
<!--      </el-row>-->
<!--    </div>-->
<!--    <iTable :tableData="tableData" :columns="columns" :loading="loading" :pageObj="pageObj">-->
<!--      <el-table-column slot="operate" label="操作" align="center" fixed="right" width="300">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button size="small" type="warning"-->
<!--                     icon='el-icon-edit'-->
<!--                     @click="edit(scope.row)">编辑-->
<!--          </el-button>-->
<!--          <el-button size="small" type="primary"-->
<!--          icon='el-icon-success'-->
<!--          @click="startUsing(scope.row)">启用-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->
<!--    </iTable>-->
<!--    <el-row class="button-box">-->
<!--      <el-button size="mini">默认按钮</el-button>-->
<!--      <el-button type="primary" size="mini">主要按钮</el-button>-->
<!--      <el-button type="success" size="mini">成功按钮</el-button>-->
<!--      <el-button type="info" size="mini">信息按钮</el-button>-->
<!--      <el-button type="warning" size="mini">警告按钮</el-button>-->
<!--      <el-button type="danger" size="mini">危险按钮</el-button>-->
<!--    </el-row>-->

<!--    <el-row class="button-box">-->
<!--      <el-button plain size="mini">朴素按钮</el-button>-->
<!--      <el-button type="primary" plain size="mini">主要按钮</el-button>-->
<!--      <el-button type="success" plain size="mini">成功按钮</el-button>-->
<!--      <el-button type="info" plain size="mini">信息按钮</el-button>-->
<!--      <el-button type="warning" plain size="mini">警告按钮</el-button>-->
<!--      <el-button type="danger" plain size="mini">危险按钮</el-button>-->
<!--    </el-row>-->

<!--    <el-row class="button-box">-->
<!--      <el-button round size="mini">圆角按钮</el-button>-->
<!--      <el-button type="primary" round size="mini">主要按钮</el-button>-->
<!--      <el-button type="success" round size="mini">成功按钮</el-button>-->
<!--      <el-button type="info" round size="mini">信息按钮</el-button>-->
<!--      <el-button type="warning" round size="mini">警告按钮</el-button>-->
<!--      <el-button type="danger" round size="mini">危险按钮</el-button>-->
<!--    </el-row>-->

    <el-row class="button-box">
      <div>{{this.detailStatus}}</div>
      <el-button icon="el-icon-search" circle size="mini"></el-button>
      <el-button type="primary" icon="el-icon-edit" circle size="mini" @click="edit1">修改1</el-button>
      <el-button type="success" icon="el-icon-check" circle size="mini" @click="edit2">修改2</el-button>
      <el-button type="info" icon="el-icon-message" circle size="mini"></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle size="mini"></el-button>
      <el-button type="danger" icon="el-icon-delete" circle size="mini"></el-button>
    </el-row>
  </div>
</template>


<script>
  import iTable from "common/iTable";
  import { mapMutations,mapGetters } from "vuex";
  import * as types from "../../store/mutation-types";
  export default {
    name: "test",
    components: {iTable},
    data() {
      return {
        tableData:[
          {
            id: '1',
            date: "2016-05-02",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1518 弄"
          },
          {
            id: '1',
            date: "2016-05-04",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1517 弄"
          },
          {
            id: '1',
            date: "2016-05-01",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1519 弄"
          },
          {
            id: '1',
            date: "2016-05-03",
            name: "王小虎",
            address: "上海市普陀区金沙江路 1516 弄"
          }
        ],
        columns: [
          {label: '名称', prop: 'name'},
          {label: '链接', prop: 'address'},
          {label: '排序', prop: 'date'},
          {slot: 'operate'}], // 操作列
        loading: false,
        pageObj: {
          size: 10,
          total: 100,
          currentPage: 1,
          func:(currentPage) =>{
            this.pageTurning(currentPage)
          }
        },
      }
    },
    computed: {
      ...mapGetters(["detailStatus"])
    },
    methods: {
      pageTurning: function (e) {
        console.log("pageTurning page1:" + e)
      },
      edit1: function () {
        this.setDetailStatus('小伙啊')
      },
      edit2: function () {
        this.setDetailStatus('小花花')
      },
      ...mapMutations({
        setDetailStatus : types.SET_DETAILSTATUS,
      })
    },

    }
</script>

<style scoped>
  .button-box {
    margin: 50px;
  }
</style>
